@function r($px) {
    @return $px/40*1rem;
}

@mixin imgs {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}

@mixin imgh {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}

@mixin liangh {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@mixin duoh {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@mixin sih {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

@mixin wuh {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

@mixin dongh {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
}

@mixin danh {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body {
    top: 50px;
}

@media (min-width: 1200px) {
    .container {
        width: 940px;
    }
}

.news {
    .container-fluid {
        .logos {
            padding-top: r(7);
            margin-right: r(20);
            height: 100%;
        }
        .news_box {
            width: r(910);
            margin: 0 auto;
            overflow: hidden;
            .news_top {
                .news_box_title {
                    font-size: r(30);
                    color: #ff6b08;
                    margin: r(40) 0;
                }
                .news_top_content {
                    width: r(910);
                    ul {
                        width: r(910);
                        display: flex;
                        justify-content: space-between;
                        li {
                            width: r(284);
                            padding-top: 20%;
                            overflow: hidden;
                            position: relative;
                            border-radius: r(4);
                            background: saddlebrown;
                            img {
                                @include imgs;
                            }
                        }
                    }
                }
            }
            .news_content {
                width: r(910);
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                margin-top: r(88);
                margin-bottom: r(90);
                .news_content_left {
                    width: r(222);
                    border: 1px solid #dddddd;
                    .news_content_left_img {
                        width: r(210);
                        padding-top: 65.47619047619048%;
                        overflow: hidden;
                        position: relative;
                        background: #122B40;
                        margin: r(6);
                        img {
                            @include imgs;
                        }
                    }
                }
                .news_content_right {
                    width: r(670);
                    h4 {
                        width: r(670);
                        font-size: r(18);
                        color: #ff6900;
                        margin-bottom: r(16);
                        margin-top: r(6);
                        @include danh;
                    }
                    span {
                        display: block;
                        width: r(670);
                        font-size: r(14);
                        @include danh;
                        margin-bottom: r(12);
                    }
                    p {
                        width: r(670);
                        font-size: r(14);
                        line-height: r(26);
                        @include liangh;
                    }
                    .CheckTheDetails {
                        width: r(98);
                        height: r(34);
                        text-align: center;
                        line-height: r(34);
                        background: #ff6900;
                        color: #fff;
                        border-radius: r(24);
                        float: right;
                        font-size: r(14);
                    }
                }
            }
            .paging {
                border-top: 1px dotted saddlebrown;
                .paging_box {
                    width: r(302);
                    margin: 0 auto;
                    margin-top: r(34);
                    margin-bottom: r(25);
                    overflow: hidden;
                    ul {
                        width: r(302);
                        overflow: hidden;
                        display: flex;
                        justify-content: space-between;
                        border: 1px solid #dddddd;
                        border-radius: r(4);
                        li {
                            width: r(32);
                            height: r(32);
                            text-align: center;
                            line-height: r(32);
                            color: #2a2a2a;
                            border-right: 1px solid #dddddd;
                            list-style: none;
                            &:nth-child(1) {
                                width: r(54);
                            }
                            &:nth-child(2) {
                                width: r(60);
                            }
                            &:last-child {
                                width: r(60);
                                border: none;
                            }
                        }
                    }
                }
            }
        }
    }
    //底部
    .footer_box {
        height: r(113);
        background: #3b3b3b;
        .footer_content {
            width: r(860);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            .footer_content_left {
                width: r(350);
                margin-top: r(34);
                .footer_content_left_top {
                    a {
                        color: #a1a3ab;
                        font-size: r(14);
                    }
                }
                .footer_content_left_bottom {
                    margin-top: r(10);
                    color: #a1a3ab;
                    font-size: r(12);
                    p {
                        @include danh;
                    }
                }
            }
            .footer_content_right {
                width: r(155);
                margin-top: r(38);
                margin-right: r(15);
                ul {
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
}

@media only screen and (max-width:768px) {
    .container-fluid {
        .logos {
            margin-left: r(60);
            margin-top: r(20);
            height: 100%;
        }
    }
    //新闻动态
    .news .container-fluid .news_box {
        width: 100%;
    }
    .news .container-fluid .news_box .news_top .news_box_title {
        font-size: r(100);
    }
    .news .container-fluid .news_box .news_top .news_top_content {
        width: 100%;
    }
    .news .container-fluid .news_box .news_top .news_top_content ul {
        width: 100%;
    }
    .news .container-fluid .news_box .news_top .news_top_content ul li {
        width: 32%;
    }
    .news .container-fluid .news_box .news_content .news_content_left {
        width: 30%;
    }
    .news .container-fluid .news_box .news_content .news_content_left .news_content_left_img {
        width: 97%;
        padding-top: r(326);
    }
    .news .container-fluid .news_box .news_content .news_content_right {
        width: 66%;
    }
    .news .container-fluid .news_box .news_content .news_content_right h4 {
        width: 100%;
        font-size: r(60);
    }
    .news .container-fluid .news_box .news_content .news_content_right span {
        width: 100%;
        font-size: r(30);
    }
    .news .container-fluid .news_box .news_content .news_content_right p {
        width: 100%;
        font-size: r(30);
        line-height: r(60);
    }
    .news .container-fluid .news_box .news_content {
        width: 100%;
    }
    .news .container-fluid .news_box .news_content .news_content_right .CheckTheDetails {
        width: r(200);
        height: r(60);
        line-height: r(60);
        font-size: r(30);
        margin-top: r(20);
    }
    .news .container-fluid .news_box .paging .paging_box {
        width: 60%;
    }
    .news .container-fluid .news_box .paging .paging_box ul li {
        width: 20%;
        height: r(80);
        line-height: r(80);
        font-size: r(30);
    }
    .news .container-fluid .news_box .paging .paging_box ul li:nth-child(1) {
        width: 40%;
    }
    .news .container-fluid .news_box .paging .paging_box ul li:last-child {
        width: 40%;
    }
    .news .container-fluid .news_box .paging .paging_box ul li:nth-child(2) {
        width: 50%;
    }
    //底部
    .news .footer_box .footer_content {
        width: 80%;
        padding-top: r(60);
    }
    .news .footer_box .footer_content .footer_content_left {
        width: 80%;
        transform: scale(.8);
        margin-top: 14px;
    }
    .news .footer_box {
        height: auto;
        width: 100%;
        overflow: hidden;
    }
    .news .footer_box .footer_content .footer_content_right {
        width: 20%;
        margin-top: 0;
    }
    .news .footer_box .footer_content .footer_content_right ul li {
        width: r(80);
        height: r(80);
        padding-top: r(108);
        img {
            width: 100%;
        }
    }
    .news .footer_box .footer_content {
        height: 100px;
    }
    .news .footer_box .footer_content .footer_content_left .footer_content_left_bottom p {
        font-size: r(30);
    }
    .news .footer_box .footer_content .footer_content_left .footer_content_left_top a {
        font-size: r(40);
        line-height: r(40);
    }
    .news .footer_box .footer_content {
        margin: 1px;
        width: 92%;
    }
}